import React, { Component } from "react";
import './04.css';
export default class SlideCom extends Component {
  //声明状态
  state = {
    count: 1
  }

  //声明事件回调 next
  next = () => {
    //获取 count  解构赋值
    let {count} = this.state;
    //边界判断 
    if(count >= 5){
      count = 1;
    }else{
      count += 1;
    }
    //更新状态
    this.setState({
      count: count
    })
  }

  prev = () => {
    //获取 count
    let {count} = this.state;
    //边界检测
    if(count <= 1){
      count = 5;
    }else{
      count -= 1;
    }
    //更新状态
    this.setState({
      count
    })
  }

  render() {
    return (
      <div className="container">
        <div className="slider-wrapper">
          <img src={`/images/${this.state.count}.jpg`} alt="" width="100%" />
          <div className="prev btn" onClick={this.prev}>&lt;</div>
          <div className="next btn" onClick={this.next}>&gt;</div>
        </div>
      </div>
    );
  }
}
